<template>
    <div class="logistics-management">
       <!-- 状态标签 -->
       <el-tabs v-model="searchForm.status"  @tab-click="onSearch"> 
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="未审批" name="1"></el-tab-pane>
          <el-tab-pane label="审批通过" name="2"></el-tab-pane>
          <el-tab-pane label="审批不通过" name="3"></el-tab-pane>
        </el-tabs>
      <!-- 搜索栏 -->
      <el-form :inline="true"  class="demo-form-inline">    
        <el-form-item>
          <el-input  placeholder="请输入关键词搜索" clearable v-model="searchForm.salesCode" ></el-input> 
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="tableData" 
      @selection-change="handSelectionChange"
      style="width: 100%"
      >
       <!--           多选按钮        -->
        <el-table-column type="selection" >
        </el-table-column>
        <el-table-column prop="applicationCode" label="修改申请编号" width="210px"></el-table-column>
        <el-table-column prop="orderCode" label="订单编号" width="160px"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"  width="80px"></el-table-column>
        <el-table-column prop="salesCode" label="申请人code" width="100px"></el-table-column>
        <el-table-column prop="salespersonName" label="申请人姓名" width="100px"></el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="100px" >
              <template slot-scope="scope">
                    {{scope.row.orderType == 0?'正常订单':
                    (scope.row.orderType == 1?'特价订单':'正常订单')}}
              </template>
        </el-table-column>
        <el-table-column prop="status" label="审批状态" width="100px" >
              <template slot-scope="scope">
                    {{scope.row.status == 1?'未审批':
                    (scope.row.status == 2?'审批通过':
                    (scope.row.status == 3?'审批不通过':'未审批'))}}
              </template>
        </el-table-column>
        <el-table-column prop="applicationDate" label="申请日期"  width="160px"></el-table-column>
                        
        <el-table-column prop="opinion" label="审批结果"   v-if="false" width="160px"></el-table-column> 
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini"  @click="ApprovalDetailBtn(scope.row)">详情</el-button>
            <el-button size="mini"  @click="ApprovalBtn(scope.row)" :disabled="scope.row.status === '2' || scope.row.status === '3' ">审批</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes="[3, 5, 7,10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout=" total,sizes,prev, pager, next,jumper"
          :total="total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="changePage"
          @size-change="sizeChange">
      </el-pagination>

      <!-- 详情弹窗 -->
      <el-dialog
        title="订单详情"
        :visible.sync="detailDialogVisible"
        width="50%">
        <div v-if="currentOrder">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="申请编号">{{ currentOrder.applicationCode }}</el-descriptions-item>
            <el-descriptions-item label="订单编号">{{ currentOrder.orderCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ currentOrder.customerName }}</el-descriptions-item>
            <el-descriptions-item label="申请人姓名">{{ currentOrder.salespersonName }}</el-descriptions-item>
            <el-descriptions-item label="订单类型">
              {{ currentOrder.orderType == 0 ? '正常订单' : '特价订单' }}
            </el-descriptions-item>
            <el-descriptions-item label="申请日期">{{ currentOrder.applicationDate }}</el-descriptions-item>
            <el-descriptions-item label="修改申请理由">{{ currentOrder.updateReason }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-table 
          :data="productList" 
          border 
          style="width: 100%"
          @selection-change="handleDetailSelectionChange">
          <el-table-column prop="index" label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="产品名称"></el-table-column>
          <el-table-column prop="productCode" label="产品编码"></el-table-column>
          <el-table-column prop="inventory" label="库存数量"></el-table-column>
          <el-table-column prop="placeOrderNum" label="下单数量"></el-table-column>
          <el-table-column prop="univalent" label="单价"></el-table-column>
          <el-table-column prop="price" label="单品总价"></el-table-column>
        </el-table>
        <div v-if="currentOrder">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="审批状态">
              {{ currentOrder.status == 2 ? '审批通过' : 
              (currentOrder.status == 3 ?'审批不通过':'未审批' )}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="审批意见">
              {{ currentOrder.opinion }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>

      <!-- 审批弹窗 -->
      <el-dialog
        title="订单审批"
        :visible.sync="approvalDialogVisible"
        width="40%">
        <div v-if="currentOrder">
          <el-form :model="approvalForm" label-width="100px">
            <el-form-item label="申请编号">
              <span>{{ currentOrder.applicationCode }}</span>
            </el-form-item>
            <el-form-item label="审批结果">
              <el-radio-group v-model="approvalForm.status">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见">
              <el-input
                type="textarea"
                v-model="approvalForm.opinion"
                :rows="4"
                placeholder="请输入审批意见">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="approvalDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApproval">确认审批</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>

  export default {
    name: 'LogisticsManagement',
    data() {
      return {
        searchForm: {
          status:'',
        },
        tableData: [], // 这里需要填充实际的数据
        pageSize: 7,
        total: 0,
        pageNum:1,
        detailDialogVisible: false, // 详情弹窗显示控制
        approvalDialogVisible: false, // 审批弹窗显示控制
        currentOrder: null, // 当前操作的订单
        approvalForm: {
          opinion: '', // 审批意见
          status: 1 // 默认选中"通过"
        },
        productList:[],
        saleList: [],//销售员信息
        
      }
    },
    methods: {
      //查询销售列表
      queryAllSale() {
        const roleId = 4;
        this.$axios.get("/api/order-server/uums/queryAllSale/" + roleId)
          .then(resp => {
            console.log(resp.data)
            if (resp.data.code == 200) {
              this.saleList = resp.data.data
            }
          })
      },
      //详情按钮打开窗口
      ApprovalDetailBtn(row) {
        this.currentOrder = row;
        console.log("================");
        console.log(row);
        this.detailDialogVisible = true;
        this.orderCode=row.orderCode
        this.applicationCode=row.applicationCode
        this.queryOrderApplicationProduct()
      },
       //查询订单详情信息
       queryOrderApplicationProduct() {
        this.$axios.get("/api/order-server/order/queryOrderApplicationProduct/" + this.applicationCode)
          .then(resp => {
            console.log('数据库返回的产品列表:', resp.data.data);
            if (resp.data.code == 200) {
              this.productList = resp.data.data;
            }
          });
      },
      ApprovalBtn(val){
      //打开审批弹窗
      this.currentOrder = val;
      this.approvalForm.opinion = ''; // 清空审批意见  
      this.approvalForm.status = 1; // 重置为默认值
      this.approvalDialogVisible = true;
      this.applicationCode=val.applicationCode;
      },
      //确认审批按钮
      submitApproval() {
        if (!this.approvalForm.opinion) {
          this.$message.warning('请输入审批意见');
          return;
        }
        this.$confirm('确认提交审批?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送审批请求
          this.$axios.post('/api/order-server/order/approve', {
            orderCode: this.currentOrder.orderCode,
            opinion: this.approvalForm.opinion,
            status: this.approvalForm.status, // 1为通过，2为不通过
            applicationCode:this.applicationCode
          }).then(resp => {
            if (resp.data.code === 200) {
              this.$message.success('审批成功');
              this.approvalDialogVisible = false;
              this.approvalDialogVisible= false // 审批弹窗显示控制
              this.onSearch(); // 刷新列表
            } else {
              this.$message.error(resp.data.message || '审批失败');
            }
            
          }).catch(err => {
            this.$message.error('审批失败：' + err.message);
          });
        }).catch(() => {
          this.$message.info('已取消审批');
        });
      },
      
      onSearch() {
        // 实现搜索逻辑
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.searchForm;
        this.$axios.post("/api/order-server/order/queryOrderApplicationList",pageParam)
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                //给数据tableData赋值
                this.tableData =resp.data.data.list
                //给分页总数赋值
                this.total = resp.data.data.total
            }
            })
      },
      onReset() {
        // 重置搜索表单
        this.searchForm = {
          status:'',
        }
        this.onSearch()
      },

      //分页数据

      handleSizeChange(val) {
        this.pageSize = val;
        // 重新加载数据
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        // 重新加载数据
      },
    nextPage(val){   //val 当前页 方法自动获取当前页
              //下一页  获取当前页pageNum
              this.pageNum= val;
              this.onSearch();
          },
    prevPage(val){
        //下一页
        this.pageNum= val;
        this.onSearch();
    },
    changePage(val){
        //当前页
        this.pageNum= val;
        this.onSearch();
    },
    sizeChange(val){
        //下拉框  每页条数
        this.pageSize= val;
        this.pageNum=1;
        this.onSearch();
    },
    
    },
    created() {
      this.onSearch()
    },
  }
  </script>
  
  <style scoped>
  .logistics-management {
    padding: 20px;
  }
  /* 可以添加一些弹窗相关的样式 */
  .el-descriptions {
    margin: 20px 0;
  }
  </style>